<template>
  <div class="preOrder">
    <el-table :data="currentChargeProduct" style="width: 100%">
      <el-table-column prop="date" label="充值产品"> 
        <template v-slot="{row}">
          <img style="vertical-align:middle" width="30%" :src="row.imageUrl" alt="">
          &nbsp;
          <span style="color:#FCC12D;font-weight:bolder">{{row.productName}}</span>
          <br>
          <span>{{row.description}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价">
        <template v-slot="{row}">
          <span class="price">
            {{row.price}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="数量">
        <template v-slot={row}>
          <el-input-number
          v-model="row.quantity"
          @change="quantityChange(row)"
          :min="1"
          :max="100"
          size="mini"
          label="描述文字"
        ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="小计">{{total_fee.toFixed(2)}} </el-table-column>
    </el-table>
    <div class="total_fee">
      <div class="box-wrap">
        <div class="box-shadow">
          <span class="replay--title"
            data-spm-anchor-id="a210c.1.0.i-.52681deblyKpHg">实付款:</span>
          <span class="realpay--price-symbol">￥</span>
          <span class="realpay--price" style="color:rgb(255,80,0)">{{total_fee.toFixed(2)}}</span>
          <div class="order-confirmAddr">
            <div class="confirmAddr-addr-user">
              <span class="confirmAddr-title">充值详情：</span>
              <span class="confirmAddr-pro">尊贵vip3充值-vip包月服务，心悦vip3，尊贵体验，强行踢人下线，你值得拥有</span>

            </div>
            <div class="confirmAddr-addr">
              <span class="confirmAddr-title">
                充值账户：
              </span>
              <span class="confirmAddr-usn">lbw</span>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
       
        <a role="button" title="提交订单" class="go-btn" style="background-color: rgb(255, 80, 0);">提交订单</a>
      </div>
    </div>
  </div>
</template>
<script>
// 将vuex中的数据映射过来
import { mapState } from "vuex";
export default {
  methods:{
    quantityChange(row){
      // console.log(row,row.quantity);
      // 用数量乘以价格
      this.total_fee=row.quantity*row.price
    }
  },
  computed: {
    ...mapState(["currentChargeProduct"]),
  },
  data() {
    return {
      // currentProduct: {},
      quantity:{
        num:1
        },
        total_fee:0
    };
  },
};
</script>
<style scoped lang="less">
/deep/.el-input-number{
  width: 90px;
}
/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
}
.price{
  color:red;
  font-weight: bolder;
}
.el-button{
  width:180px;
  border-radius:0;
}
.total_fee {
    text-align: right;
    margin-top: 15px;
}
/deep/.box-wrap {
    display: inline-block;
    border: 1px solid #ff0036;
}
.box__shadow {
    border: 3px solid #fff0e8;
    min-width: 230px;
    padding: 10px 5px 10px 20px;
}
 .realpay--title {
    font-weight: 700;
    color: #333;
}
.realpay--price-symbol {
    font-size: 26px;
    margin-right: 4px;
    color: #999;
}
.realpay--price {
    color: #ff0036;
    font: 700 26px tahoma;
}
.order-confirmAddr .confirmAddr-title {
    font-weight: 700;
    color: #333;
}
.go-btn {
    display: inline-block;
    width: 182px;
    height: 39px;
    position: relative;
    vertical-align: middle;
    line-height: 39px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    background: #dd2727;
    color: #fff;
}
</style>
